<script setup lang="ts">
import * as echarts from "echarts";
import {onMounted, onUnmounted, defineProps} from "vue";

const props = defineProps({
  setOption: Object,
  id: String
})

const echart = echarts;
let chart: echarts.ECharts;
onMounted(() => {
  initChart();
});
onUnmounted(() => {
  chart.dispose();
});

const initChart = () => {
  chart = echart.init(document.getElementById(props.id as string), "dark");
  // 把配置和数据放这里
  chart.setOption({
    ...props.setOption,
    backgroundColor: "rgba(0,0,0,0)"
  });
  window.onresize = function () {
    //自适应大小
    chart.resize();
  };
}

</script>

<template>
  <div class="echarts_box">
    <div :id="props.id" style="width: 100%;height: 100%;"></div>
  </div>
</template>

<style scoped lang="less">
.echarts_box {
  height: 100%;
  overflow: hidden;
}
</style>
